<template>
  <div class="main-box">
    <TreeFilter
      label="data"
      id="attr"
      title="问题分类"
      :data="treeFilterData"
      :default-value="initParam.departmentId"
      @change="changeTreeFilter"
      @delete-node="handleRightClick"
    />
    <!-- @change="changeTreeFilter"
      @delete-node="handleRightClick" -->
    <div class="classBox">
      <div class="editClass">
        <p>编辑</p>
        <el-form :label-position="labelPosition" label-width="auto" :model="problemClass" style="max-width: 600px">
          <el-form-item label="分类名称">
            <el-input v-model="problemClass.name" :disabled="problemClass.name == '问题分类' ? true : false" />
          </el-form-item>
          <el-form-item label="自定义类型">
            <el-select v-model="typeVal" @change="getTypeValue">
              <el-option v-for="item in type" :key="item.eavNo" :value="item.eavNo" :label="item.eavName"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类编码">
            <el-input v-model="problemClass.code" />
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input v-model="problemClass.desc" />
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="saveEdit(initParam.departmentId)">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="editClass">
        <p>新增</p>
        <el-form :label-position="labelPosition" label-width="auto" style="max-width: 600px" :model="problemClass_add">
          <el-form-item label="分类名称">
            <el-input v-model="problemClass_add.name" />
          </el-form-item>
          <el-form-item label="自定义类型">
            <el-select v-model="typeVal_add" @change="getTypeValue">
              <el-option v-for="item in type" :key="item.eavNo" :value="item.eavNo" :label="item.eavName"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类编码">
            <el-input v-model="problemClass_add.code" />
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input v-model="problemClass_add.desc" />
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="saveadd(initParam.departmentId)">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="problemClassification">
import { ref, reactive, onMounted } from "vue";
import {
  getQuestionClass,
  getEavEntity,
  checkClass_edit,
  editClass_submit,
  checkClass_add,
  addClass_submit,
  deleteProblemClass
} from "@/api/modules/dictionary";
import { FormProps, ElMessage } from "element-plus";
import ContextMenu from "@imengyu/vue3-context-menu";
// import { useRouter } from "vue-router";
import TreeFilter from "@/components/TreeFilter/treeFilter.vue";
onMounted(() => {
  getTreeFilter();
  getType();
});
const labelPosition = ref<FormProps["labelPosition"]>("right");
const problemClass = reactive({
  name: "",
  code: "",
  desc: ""
});
const problemClass_add = reactive({
  name: "",
  code: "",
  desc: ""
});
const addCimClassName = ref("");
const addCimClassCode = ref("");
const addCimClassDesc = ref("");
const treeFilterData = ref<any>([]);
const initParam = reactive({ departmentId: "" });
const getTreeFilter = async () => {
  const params = {
    types: "Problem",
    parentEventId: 0
  };
  const data = await getQuestionClass(params);
  treeFilterData.value = [];
  treeFilterData.value.push(data);
};
const type = ref<any>([]);
const typeVal = ref<any>();
const typeVal_add = ref("");
const getType = async () => {
  const row = {
    row: 10000
  };
  const data = await getEavEntity(row);
  type.value = data.data;
};
//
const changeTreeFilter = (val: {
  id: { id: string; categoryCodeRule: string; description: string; eavId: string };
  label: string;
}) => {
  if (val instanceof Array) {
    return;
  }
  problemClass.name = val.label;
  problemClass.code = val.id?.categoryCodeRule || "";
  problemClass.desc = val.id?.description || "";
  initParam.departmentId = val.id.id || "";
  type.value.forEach(item => {
    if (val.id?.eavId === null) {
      typeVal.value = null;
    } else {
      if (item.eavNo === Number(val.id?.eavId)) {
        typeVal.value = Number(val.id?.eavId);
        console.log(typeVal.value);
      }
    }
  });
};

const getTypeValue = () => {
  console.log(typeVal.value);
};
const saveEdit = async e => {
  console.log(e);
  if (e === "") {
    ElMessage.error("请先选择一个分类");
    return;
  } else {
    const editParams = {
      "eventCategoryDto.eventName": problemClass.name,
      "eventCategoryDto.eavId": typeVal.value,
      "eventCategoryDto.formId": "",
      "eventCategoryDto.categoryCodeRule": problemClass.code,
      "eventCategoryDto.eventDescription": problemClass.desc,
      "eventCategoryDto.eventId": e
    };
    const res = await checkClass_edit(editParams);
    console.log(res);
    if ((res as any) === "isExist") {
      ElMessage.error("该数据分类已存在！");
      return;
    } else {
      const data = await editClass_submit(editParams);
      console.log(data);
      initParam.departmentId = "";
      problemClass.name = "";
      typeVal.value = "";
      problemClass.code = "";
      problemClass.desc = "";
      getTreeFilter();
    }
  }
};
const saveadd = async e => {
  if (e === "") {
    ElMessage.error("请先选择一个分类");
    return;
  } else {
    const addParams = {
      "eventCategoryDto.eventName": problemClass_add.name,
      "eventCategoryDto.eavId": typeVal_add.value,
      "eventCategoryDto.formId": "",
      "eventCategoryDto.categoryCodeRule": problemClass_add.code,
      "eventCategoryDto.eventDescription": problemClass_add.desc,
      "eventCategoryDto.parentEventId": e
    };
    const res = await checkClass_add(addParams);
    if ((res as any) === "isExist") {
      ElMessage.error("该数据分类已存在！");
      return;
    } else {
      const data = await addClass_submit(addParams);
      if ((data as any) === null) {
        initParam.departmentId = "";
        typeVal.value = "";
        problemClass.name = "";
        problemClass.code = "";
        problemClass.desc = "";

        typeVal_add.value = "";
        problemClass_add.name = "";
        problemClass_add.code = "";
        problemClass_add.desc = "";
        getTreeFilter();
      } else {
        ElMessage.error("添加失败，请联系管理员");
      }
    }
  }
};
//删除节点
const handleRightClick = (e: object, val: { id: { id: string } }) => {
  ContextMenu.showContextMenu({
    x: (e as any)?.clientX,
    y: (e as any)?.clientY,
    items: [
      {
        label: "删除",
        onClick: async () => {
          const id = {
            "eventCategoryDto.eventId": val.id.id || ""
          };
          try {
            const res = await deleteProblemClass(id);
            if ((res as any) === "0") {
              ElMessage.error("该数据存在相关联的数据，不能被删除！");
              return;
            } else {
              ElMessage.success("删除分类成功");
              getTreeFilter();
            }
          } catch (e) {
            ElMessage.error("该数据存在相关联的数据，不能被删除！");
          }
        }
      }
    ]
  });
};
</script>
<style scoped lang="scss">
.classBox {
  display: flex;
  width: 100%;
  .editClass {
    width: 50%;
  }
}
</style>
